<template>
  <div id="userLoginPage">
    <div class="login-container">
      <h2 class="artistic-title">创建应用</h2>
      <a-form
        class="login-form"
        label-align="left"
        auto-label-width
        :model="form"
        @submit="handleSubmit"
      >
        <a-form-item field="appName" label="应用名称">
          <a-input
            v-model="form.appName"
            placeholder="请输入应用名称"
            prefix-icon="icon-user"
            class="input-field"
          />
        </a-form-item>
        <a-form-item field="appDesc" label="应用描述">
          <a-input
            v-model="form.appDesc"
            placeholder="请输入应用描述"
            prefix-icon="icon-lock"
            class="input-field"
          />
        </a-form-item>
        <a-form-item field="appIcon" label="应用图标">
          <a-input v-model="form.appIcon" placeholder="请输入应用图标地址" />
        </a-form-item>
        <a-form-item field="appType" label="应用类型">
          <a-select
            v-model="form.appType"
            :style="{ width: '320px' }"
            placeholder="请选择应用类型"
          >
            <a-option
              v-for="(value, key) in APP_TYPE_MAP"
              :value="Number(key)"
              :label="value"
              :key="key"
            />
          </a-select>
        </a-form-item>
        <a-form-item field="scoringStrategy" label="评分策略">
          <a-select
            v-model="form.scoringStrategy"
            :style="{ width: '320px' }"
            placeholder="请选择评分策略"
          >
            <a-option
              v-for="(value, key) in getScoringOptions(form.appType)"
              :value="Number(key)"
              :label="value"
              :key="key"
            />
          </a-select>
        </a-form-item>

        <a-form-item class="form-buttons">
          <a-button type="primary" html-type="submit" class="login-button">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { withDefaults, defineProps, ref, watchEffect } from "vue";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import API from "@/api";
import {
  addAppUsingPost,
  editAppUsingPost,
  getAppVoByIdUsingGet,
} from "@/api/appController";
import { APP_SCORING_STRATEGY_MAP, APP_TYPE_MAP } from "@/constant/app";

/**
 * 表单信息
 */
const form = ref({
  appName: "",
  appDesc: "",
  appIcon: "",
  appType: 0,
  scoringStrategy: 0,
} as API.AppAddRequest);

const router = useRouter();

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return "";
  },
});

const oldApp = ref<API.AppVO>();

/**
 * 加载数据
 */
const loadData = async () => {
  if (!props.id) {
    return;
  }
  const res = await getAppVoByIdUsingGet({
    id: props.id as any,
  });
  if (res.data.code === 0 && res.data.data) {
    oldApp.value = res.data.data as any;
    form.value = res.data.data;
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

// 获取旧数据
watchEffect(() => {
  loadData();
});

/**
 * 提交表单
 */
const handleSubmit = async () => {
  let res: any;
  if (props.id) {
    res = await editAppUsingPost({
      id: props.id as any,
      ...form.value,
    });
  } else {
    // 创建
    res = await addAppUsingPost(form.value);
  }
  if (res.data.code === 0) {
    message.success("操作成功，即将跳转到应用详情页");
    setTimeout(() => {
      router.push(`/app/detail/${props.id || res.data.data}`);
    }, 3000);
  } else {
    message.error("操作失败，" + res.data.message);
  }
};

// 获取评分策略选项
const getScoringOptions = (appType: number) => {
  if (appType === 0) {
    return {
      0: APP_SCORING_STRATEGY_MAP[0],
    };
  } else {
    return APP_SCORING_STRATEGY_MAP;
  }
};
</script>
